<template>
    <div class="infoList">
        <!-- 新增按钮 -->
        <el-form :inline="true" label-width="60px" class="demo-form-inline" size="small">
            <el-form-item>
                <el-button type="primary" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 新增的模态框 -->
        <el-dialog :title="(addOrEdit === 'add') ? '添加学生信息' : '修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="form.sex" label="1">男</el-radio>
                    <el-radio v-model="form.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
                    <el-input v-model="form.father" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
                    <el-input v-model="form.mather" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
                    <el-date-picker v-model="form.time" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!-- 模态框的slot，模态框的底部，确定或者取消 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancel('form')">取 消</el-button>
                <el-button type="primary" @click="handleConfirm('form')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- table表格展示数据的区域 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
            </el-table-column>
            <el-table-column prop="age" label="年龄" align="center">
            </el-table-column>
            <el-table-column prop="father" label="父亲" align="center">
            </el-table-column>
            <el-table-column prop="mather" label="母亲" align="center">
            </el-table-column>
            <el-table-column prop="address" label="家庭住址" align="center">
            </el-table-column>
            <el-table-column prop="time" label="入校时间" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" icon="el-icon-edit" @click="editInfo(scope.row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteInfo(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { infoModify, getInfoList, delInfo } from '@/api/api.js'
export default {
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: "80px",
            form: {
                name: "",
                sex: "1",
                age: "",
                father: "",
                mather: "",
                address: "",
                time: "",
                phone: "",
            },
            rules: {
                name: [{ required: true, message: '请输入姓名' }],
                sex: [{ required: true }],
                age: [{ required: true, message: '请输入年龄' }],
                address: [{ required: true, message: '请输入地址' }],
                time: [{ required: true, message: '请输入入学时间' }],
                phone: [{ required: true, message: '请输入联系方式' }]
            },
            addOrEdit: "add",
            tableData: []
        }
    },
    methods: {
        addBtn() {
            this.form = {
                name: "",
                sex: "1",
                age: "",
                father: "",
                mather: "",
                address: "",
                time: "",
                phone: "",
            }
            this.dialogFormVisible = true;
            this.addOrEdit = "add";
        },
        handleCancel(form) {
            this.$refs[form].resetFields()
            this.dialogFormVisible = false
        },
        handleConfirm(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    // form 和 this.form 的不同，this.form是表单数据，
                    // form是handleConfirm(form)传入的参数
                    // this.$refs[form]就是this.$refs['form']
                    console.log("form =====>", form);
                    console.log("this.form =====>", this.form);
                    if (this.addOrEdit === 'add') {
                        // post是非幂等，n次请求会有n个结果，常用于新增
                        infoModify('post', this.form).then(res => {
                            if (res.data.status === 200) {
                                this.getData()
                                this.dialogFormVisible = false
                                this.$message({ type: 'success', message: res.data.message })
                            }
                        })
                    } else {
                        // put是幂等，n次请求只有一个结果，前面的请求被覆盖，常用于修改
                        infoModify('put', this.form).then(res => {
                            if (res.data.status === 200) {
                                this.getData()
                                this.dialogFormVisible = false
                                this.$message({ type: 'success', message: res.data.message })
                            }
                        })
                    }
                }
            })
        },
        // 调接口，获取或者更新表格的数据
        getData() {
            getInfoList().then(res => {
                if (res.data.status === 200) {
                    this.tableData = res.data.data
                }
            })
        },
        editInfo(row) {
            // 通过表格插槽获得的scope.row的数据，也就是表格这一行的数据
            console.log("scope.row =====>", row)
            this.form = { ...row }
            this.addOrEdit = "edit"
            this.dialogFormVisible = true
        },
        deleteInfo(row) {
            // 通过表格插槽获得的scope.row的数据，也就是表格这一行的数据
            console.log("scope.row =====>", row)
            // alert没办法取消删除，模拟的是系统的alert，使用confirm比较好
            // this.$alert('你确定要删除吗？', '提示', {
            //     confirmButtonText: '确定',
            //     callback: () => {
            //         delInfo(row.id).then(res => {
            //             if (res.data.status === 200) {
            //                 this.getData()
            //                 this.$message({ message: res.data.message, type: 'success' })
            //             }
            //         })
            //     }
            // })
            this.$confirm('你确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                delInfo(row.id).then(res => {
                    if (res.data.status === 200) {
                        this.getData()
                        this.$message({ message: res.data.message, type: 'success' })
                    }
                })
            }).catch(() => {
                this.$message({ message: '已取消删除', type: 'info' })
            })
        }
    },
    created() {
        this.getData();
    }
}
</script>
<style lang="scss" scoped>
.infoList {
    .demo-form-inline, .el-form-item{
        text-align: left;
    }
}
</style>